<template>
	<view class="orderPay">

		<view class="goods">
			<u--image radius="5" width="710rpx" height="710rpx" mode="aspectFill"
				src="https://source.theone.art/watermarkResize/05c3fc604cbb3126d01ea4dc66a7d76d/8445729d333ebe3efffa7aa809d18273-16469713907440.5.png">
			</u--image>
		</view>

		<view class="card">
			<view class="tip">订单信息</view>
			<view class="row">
				<view class="title">商品名称</view>
				<view class="value">隔壁老王</view>
			</view>
			<view class="row">
				<view class="title">艺术家</view>
				<view class="value">老王</view>
			</view>
			<view class="row">
				<view class="title">价格</view>
				<view class="value price">￥9,999,00</view>
			</view>
			<view class="row">
				<view class="title">合约地址</view>
				<view class="value address">0x6ed3****79361 <text class="iconfont icon-fuzhi1"></text></view>
			</view>
			<view class="row">
				<view class="title">认证标识</view>
				<view class="value">上链认证中</view>
			</view>
			<view class="row">
				<view class="title">数量</view>
				<view class="value">
					<u-number-box v-model="number" @change="valChange" button-size="22" color="#999" bgColor="#ddd"
						iconStyle="color: #999"></u-number-box>
				</view>
			</view>
		</view>

		<view class="card">
			<view class="tip">支付方式</view>
			<view class="cardBox">
				<view class="item" v-for="(item,index) in payMentList" :class="{active:index == payMethod}" @click="payMethod = index">
					<text class="text">{{item.text}}</text>
					<u-icon v-show="index == payMethod" color="#3c9cff" class="icon" name="checkbox-mark"></u-icon>
				</view>
			</view>
			


		</view>

		<view class="confirmOrderWrap">
			<view class="confirmOrder">
				<view class="infor">1件商品，总金额：<text class="price">￥9,999,00</text> </view>
				<view class="confirm btn light-btn">确认支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: 0,
				market: {},
				id: 8180,
				payMethod: 0,
				
				payMentList:[
					{
						text:"余额支付"
					},
					{
						text:"网银支付"
					},
					{
						text:"快捷支付"
					}
				]
			};
		},
		onLoad(options) {},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
			}

		}
	}
</script>

<style lang="scss">
	.orderPay {
		// background-color: #0a0a22;
		padding: 20rpx;
		.card {
			background-color: #232639;
			border-radius: 10rpx;
			margin-top: 30rpx;
		
			.title {
				color: #ffffff;
				font-size: 28rpx;
			}

			.label {
				color: #b9bbca;
				font-size: 28rpx;
			}

			.tip {
				background-color: #393c4f;
				height: 80rpx;
				line-height: 80rpx;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
				padding: 0 30rpx;
				font-weight: bold;
			}

			.colum {
				display: flex;
				flex-direction: column;
				padding: 14rpx 30rpx;
				font-size: 26rpx;
			}
			.cardBox{
				padding: 30rpx;
				.item{
					padding: 30rpx 20rpx;
					margin-bottom: 10px;
					border-bottom: 1px solid rgba(153, 153, 153, .2);
					display: flex;
					justify-content: space-between;
				}
				.item.active{
					border-bottom:1px solid #3c9cff;
					
				}
				.item.active .text{
					color:#3c9cff ;
				}
			}
			.row {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 30rpx;
				font-size: 26rpx;

				.value {
					color: #999;

					.iconfont {
						color: #b9bbca;
						margin-left: 4rpx;
					}
				}

				.price {
					color: #fac22b;
				}

				.address {
					color: #3c9cff;

					.iconfont {
						color: #3c9cff;
					}
				}
			}

			.row.pay {
				padding: 30rpx 30rpx;
			}
		}

		.confirmOrderWrap {
			width: 750rpx;
			height: 100rpx;
			margin-top: 30rpx;
		}

		.confirmOrder {
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 9;
			width: 750rpx;
			height: 100rpx;
			padding: 0 30rpx;
			background-color: #232639;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.infor {
				font-size: 20rpx;
				color: #999;
				margin-right: 20rpx;

				.price {
					font-size: 28rpx;
					color: #fac22b;
				}
			}

			.btn {
				height: 60rpx;
				line-height: 60rpx;
			}
		}
	}
</style>
